<template>
	<view class="page">
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id"
			@click="jieBangFunc" @open="open" :options="options" bg-color="#F3F4F8">
			<view class="item" @click="selectUserBlank(item)">
				<view class="blankBoxIcon">
					<img :src="$utils.imagePath(item.bankDeposit.logo)" style="width: 100%;height: 100%;">
				</view>
				<view class="right">
					<view class="rightTop">
						{{item.bankDeposit.name}}储蓄卡
					</view>
					<view class="rightBtm">
						{{$utils.subStr(item.cardNum,0,4)}}****{{$utils.subStr(item.cardNum,item.cardNum.length-4,4)}}
					</view>

				</view>
			</view>
		</u-swipe-action>

		<u-popup v-model="Isshow" mode="bottom" width="750rpx" height="449rpx">
			<view class="modelContent">
				<view class="modelMessage">
					您当前正在执行解绑操作，
					解绑后无法恢复，确定继续？
				</view>
				<view class="modelsubmit" @click="submit">确认</view>
				<view class="modelsubmit1" @click="cancel">取消</view>
			</view>
		</u-popup>
		<!-- <view class="ail">
			展开全部(6)
		</view> -->
		<view class="addBlank" @click="$next(`/pages/withDrawal/addBankCard`)">
			<u-icon name="plus" style="color: #666;"></u-icon>
			<view class="blank">
				添加银行卡
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				removeIndex: 0,
				Isshow: false,
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '解绑',
					style: {
						backgroundColor: '#dd524d',
						height: '120rpx',
						marginTop: '16rpx'
					}
				}]
			}
		},

		onLoad() {
			this.getBankCardRes()
		},
		mounted() {
			uni.$on('reloadData', (res) => {
				this.page = 1
				this.getBankCardRes()
			})
		},
		methods: {
			getBankCardRes() {
				this.$axios.request(this.$api.getBankCardRes, "GET").then((val) => {
					this.list = val.data.list
				})
			},
			jieBangFunc(index, index1) {
				this.Isshow = true
				this.removeIndex = index

			},
			cancel() {
				this.Isshow = false

			},
			submit() {
				this.$axios.request(this.$api.delBankCardRes, "DELETE", this.list[this.removeIndex].id.split(",")).then((
					val) => {
					this.list.splice(this.removeIndex, 1);
					this.$u.toast(`解绑成功`);
					this.Isshow = false
				})

			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			// 每个账户项,选中某一项时，携带相关参数跳转到提现页面
			selectUserBlank(item) {

				uni.$emit('chooseBankCard', item)
				this.$nextTick(() => {
					uni.navigateBack()

				})
			}

		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #F3F4F8;
		overflow-y: hidden;
	}

	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 120rpx;
		margin-top: 16rpx;
		background-color: #fff;
		padding: 0 32rpx;
	}

	.blankBoxIcon {
		width: 60rpx;
		height: 60rpx;
	}

	.right {
		margin-left: 9rpx;
	}

	.rightTop {
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333333;
	}

	.rightBtm {
		margin-top: 5rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #62656D;
	}

	.ail {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #BBBBBB;
		text-align: center;
		margin-top: 16rpx;
	}

	.addBlank {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 686rpx;
		height: 100rpx;
		background-color: #fff;
		border: 1rpx dotted #707070;
		margin: 32rpx auto 0;
	}

	.blank {
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #333333;
		margin-left: 5rpx;
	}

	.modelContent {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.modelMessage {
		width: 416rpx;
		height: 105rpx;
		font-size: 32rpx;
		font-family: 'PingFang SC';
		font-weight: 300;
		line-height: 60rpx;
		color: #666666;
		margin: 64rpx auto;
		text-align: center;
	}

	.modelsubmit,
	.modelsubmit1 {
		width: 686rpx;
		height: 64rpx;
		border-radius: 4rpx;
		background-color: #3975EA;
		margin: 0 auto 24rpx;
		font-size: 28rpx;
		font-family: .PingFang SC;
		font-weight: 300;
		line-height: 64rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.modelsubmit1 {
		background-color: #F1F1F1;
		color: #999999;
	}

	/* 	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	} */
</style>
